<template>
	<div>
		<section id="title">
			<div class="left">
				<p style="color: #ff6600;font-size: 28px;font-weight: 800;">{{shopmessage.rating}}</p>
				<p style="color: #666666;font-size: 16px;">综合评价</p>
				<p style="color: #999999;font-size: 12px;">超过周边商家{{shopmessage.rating_count}}%</p>
			</div>
			<div class="left">
				<p>服务态度&nbsp; <i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i>&nbsp;<span>4.6</span></p>
				<p>菜品评价 &nbsp;<i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i> <i class=" icon-star"></i>&nbsp;<span>4.8</span></p>
				<p>送达时间 <span class="time">{{shopmessage.order_lead_time}}分钟</span></p>
			</div>
		</section>
		<section id="delnumber">
				<div v-for="del in delnumber" class="left">
				{{del.name}}({{del.count}})
				</div>	
				<div style="clear: both; width: 0px;height: 0px;background: white;"></div>
		</section>
		
		<section id="content">
			<div v-for="del in delcontent">
				<div class="left">
					<p>{{del.username}}</p>
					<p>{{del.time_spent_desc}}</p>
					<p>评价等级{{del.rating_star}}</p>
				</div>
				<div class="right">
					<p>{{del.rated_at}}</p>
				</div>
				<div style="clear: both;"></div>
			</div>			
		</section>
		<div style="height: 50px;"></div>
	</div>
</template>

<script type="text/javascript">
	import axios from 'axios'
	import $ from '../../assets/jquery.js'
	import '../../assets/Font-Awesome-3.2.1/css/font-awesome.min.css'
	export default{
		name:'right',
		data:function(){
			return{
				shopmessage:{},
				delnumber:{},
				delcontent:{}
				
			}
		},
		created:function(){
			var id = this.$route.params.id
			axios.get('https://mainsite-restapi.ele.me/shopping/restaurant/'+id+'?extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics&latitude=34.72856&longitude=113.75245')
			.then(function(res){
				this.shopmessage = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//评价内容数量
			axios.get('https://mainsite-restapi.ele.me/ugc/v2/restaurants/'+ id + '/ratings/tags')
			.then(function(res){
				console.log(res)
				this.delnumber = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//评价的内容
			axios.get('https://mainsite-restapi.ele.me/ugc/v2/restaurants/'+ id +'/ratings?has_content=true&offset=0&limit=10')
			.then(function(res){
				console.log(res)
				this.delcontent = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		}
	}
</script>

<style type="text/css" scoped="scoped">
	#title{height: 140px;width: 100%;background: white;}
	#title div:nth-of-type(1){width: 120px;height: 110px;border-right: 1px solid gainsboro;margin: 12px 10px 0px 15px;text-align: center;}
	#title div:nth-of-type(2){width: 50vw;height: 110px;margin: 12px 10px 0px 15px;line-height: 35px;}
	#title div:nth-of-type(2) p{color: #666666;}
	#title div:nth-of-type(2) i{color: #ffaa0c;}
	.left{float: left;}
	.right{float: right;}
	.time{font-size: 12px;color: grey;}
	/*评价数量*/
	#delnumber{background: white;margin-top: 10px;padding: 10px;height: auto;}
	#delnumber div{background: #ebf5ff;margin: 5px;color: #6d7885;text-align: center;padding: 10px 10px;border-radius:5px;}
	/*内容区域*/
	#content{width: 100%;}
	#content>div{width: 100%;background: white;padding:20px 30px;border: 1px solid #dddddd;}
</style>